//单折柱混合
<template>
  <div ref="echarts"
       class="main"> </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
      oneData: [3, 1, 3, 4, 3, 8, 3, 4, 8, 12, 10, 9],
    }
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    option: {
      handler (newval, oldval) {
        console.log(newval, oldval);
        this.option = newval
        this.init()
      },
      deep: true,
    },
  },
  methods: {
    init () {
      const { unitA, unitB, nameA, nameB, maxA, maxB, intervalA, intervalB, date, colorA, colorB, brokenLineData, pieData } = this.option
      var myChart = echarts.init(this.$refs.echarts);
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(24,48,72,0.6)',
          borderWidth: 0,
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: 'white' // 设置文字颜色
          },
        },
        grid: {
          // top: '13%',
          left: '6%',
          right: '10%',
          // bottom: '13%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar'] },
            restore: { show: false },
            saveAsImage: { show: false }
          },
        },
        legend: {
          bottom: '40',
          textStyle: {
            // color: 'rgba(172, 254, 255, 1)'
          },
        },
        xAxis: [
          {
            type: 'category',
            // name: '时间/月份',
            data: date, //月份
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(0, 251, 255, 1)'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: unitA,
            min: 0,
            max: maxA,
            interval: intervalA,
            axisLine: {
              show: false,
              lineStyle: {
                // color: 'rgba(0, 251, 255, 1)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(0, 251, 255, .1)'
                // opacity: 0.2
              }
            }
          },
          {
            type: 'value',
            name: unitB,
            min: 0,
            max: maxB,
            interval: intervalB,
            axisLine: {
              show: false,
              lineStyle: {
                // color: colorA //右边y轴数据
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(0, 251, 255, .1)'
                // opacity: 0.2
              }
            }
          }
        ],
        series: [
          {
            name: nameA,
            type: 'bar',
            barWidth: 10,
            data: brokenLineData, // 柱状图数据
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorA // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
          {
            name: nameB,
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: pieData, //折线图数据
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorB // 折线图颜色
                  }
                ])
              }
            }
          },
        ],
      })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  created () {

  },
  mounted () {
    setTimeout(this.init(), 1000);
  }
}
</script>

<style scoped>
.main {
  height: 3.75rem;
  width: 100%;
}
</style>
